import React from 'react';

import StandardTable from "./StandardTable";
import {getTimeDistance, secs2time, ts2time} from "../../utils/utils";
import {Divider} from "antd";
import * as ReactDOM from "react-dom";
import ModalMap from "./ModalMap";
import moment from "moment";
import ModalBigMap from "./ModalBigMap";

class DataTable extends React.Component {
  state = {
    selectedRows: [],
    pointPosition: null,
    visible: false,
    index: undefined,
  };

  componentDidMount() {
    let domNode = ReactDOM.findDOMNode(this.table_Node);
    if (domNode) {
      domNode.addEventListener('click', this.handleTableClick);
    }
  }

  handleTableClick = (pointPosition) => () => {
    this.setState({pointPosition, visible: true,})
  };

  handleTableClickWithPl = (pointPosition, index) => () => {
    this.setState({pointPosition, visible: true, index})
  };


  handleSelectRows = rows => {
    this.setState({
      selectedRows: rows,
    });
  };


  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    // const { dispatch } = this.props;
    // const { formValues } = this.state;
    // const filters = Object.keys(filtersArg).reduce((obj, key) => {
    //   const newObj = { ...obj };
    //   newObj[key] = getValue(filtersArg[key]);
    //   return newObj;
    // }, {});
    //
    // const params = {
    //   currentPage: pagination.current,
    //   pageSize: pagination.pageSize,
    //   ...formValues,
    //   ...filters,
    // };
    // if (sorter.field) {
    //   params.sorter = `${sorter.field}_${sorter.order}`;
    // }
    //
    // dispatch({
    //   type: 'rule/fetch',
    //   payload: params,
    // });
  };

  handleCloseModal = () => {
    this.setState({visible: false,})
  };

  handleDetailClick = (text, record) => () => {
    const {start_time, end_time, device_id} = record;
    const start = moment(start_time).valueOf() / 1e3;
    const end = moment(end_time).valueOf() / 1e3;
    const params = {device_id, type: 'detail', start_time: start, end_time: end,};
    this.props.onFetch(params);
  };

  render() {
    const {loading, allData, detailData, type, columnsDetail, columnsDay, handleDataFormat, showPolyline, showChart,} = this.props;
    const {selectedRows, visible, pointPosition, index} = this.state;
    let reportData = type === 'detail' ? detailData : allData;

    const data = handleDataFormat(reportData, type);
    if (showChart) {
      this.chartData = data
    }

    return (
      <div>
        <StandardTable ref={table_Node => this.table_Node = table_Node}
                       selectedRows={selectedRows}
                       loading={loading}
                       data={data}
                       columns={type === 'all' && !showChart ? columnsDay(this.handleDetailClick) : showPolyline ? columnsDetail(this.handleTableClickWithPl) : columnsDetail(this.handleTableClick)}
                       onSelectRow={this.handleSelectRows}
                       onChange={this.handleStandardTableChange}
        />
        {
          showPolyline ? <ModalBigMap visible={visible} pointPosition={pointPosition} onClose={this.handleCloseModal}
                                      reportData={reportData} index={index}/>
            : <ModalMap visible={visible} pointPosition={pointPosition} onClose={this.handleCloseModal}/>
        }
      </div>
    )
  }
}


export default DataTable;
